<script>
import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      /*星星的密集程度，数字越大越多*/
      const stars = 900;
      const starsContainer = document.querySelector(".stars_starrySky");

      /*星星的看起来的距离,值越大越远,可自行调制到自己满意的样子*/
      const r = 500;
      for (let i = 0; i < stars; i++) {
        const star = document.createElement("div");
        star.classList.add("star_starrySky");
        starsContainer.appendChild(star);
      }

      const starElements = document.querySelectorAll(".star_starrySky");
      starElements.forEach(function (starElement) {
        const s = 0.2 + (Math.random() * 1);
        const curR = r + (Math.random() * 300);
        starElement.style.transformOrigin = "0 0 " + curR + "px";
        starElement.style.transform = "translate3d(0,0,-" + curR + "px) rotateY(" + (Math.random() * 360) + "deg) rotateX(" + (Math.random() * -50) + "deg) scale(" + s + "," + s + ")";
      });
    });
  }
}
</script>

<template>
  <div class="box_starrySky">
    <!--背景层，不要删除，否则没有作用-->
    <div class="stars_starrySky"></div>
  </div>
</template>

<style>
@keyframes Rotate_StarrySky {
  0% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
  }

  100% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
  }
}

.box_starrySky {
  overflow: hidden;
  position: absolute;
  z-index: -999;
}

.box_starrySky .stars_starrySky {
  transform: perspective(500px);
  transform-style: preserve-3d;
  position: absolute;
  bottom: 0;
  perspective-origin: 50% 100%;
  left: 50%;
  animation: Rotate_StarrySky 90s infinite linear;
  z-index: -999;
}

.box_starrySky .star_starrySky {
  width: 2px;
  height: 2px;
  background: #F7F7B6;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0 -300px;
  transform: translate3d(0, 0, -300px);
  backface-visibility: hidden;
  z-index: -999;
}

.box_starrySky .table {
  width: 400px;
  height: 350px;
  margin: 80px auto;
  z-index: -999;
}

.box_starrySky .table form {
  width: 100%;
  z-index: -999;
}

.box_starrySky .table .name {
  width: 280px;
  margin: 20px auto 30px auto;
  display: block;
  height: 30px;
  border-radius: 20px;
  border: none;
  background: rgba(0, 0, 0, 0.2);
  text-indent: 0.5em;
  z-index: -999;
}

.box_starrySky .table .btn {
  width: 100px;
  height: 30px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  border: none;
  color: white;
  margin: 0 auto;
  display: block;
  z-index: -999;
}
</style>